<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM（针对页面操作）+BOM（针对浏览器）
		 学习主体：针对页面操作比较多----DOM操作
		 JQuery操作DOM   ：理解：JQ框架改变页面内容效果
		 js基础就可以直接学习  ，了解函数使用
		 基础函数----事件源之后出现，事件源语法糖中
		 html（）       作用：增加一个元素，覆盖原有html
		 val（）           作用：针对input元素，实现修改文本框内容
		 text（）           作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮。然后  ，改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, fugit molestiae. Facilis laborum iste id itaque rem esse pariatur eum, similique praesentium assumenda ipsam accusamus porro cumque excepturi natus? Aliquid!</p>
		<div style="width: 200px; height: 200px; background: #000;"></div>
		<h3>lorem</h3>
		<input type="button" value="按钮2" />
		<input type="text" value="输入文本框内容">
		<script>
			$("button").click(function(){
				/* JQ操作DOM--html（）函数使用 */
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
			});
			/* 练习:   div    200*200   背景颜色黑色，鼠标划过之后
			 下面内容修改：<h3> 提示，修改为黄色*/
		
			 $("div").mouseenter(function(){
				$("h3").html("<h3>黄颜色</h3>") 
			 });
				  /* 拓展：按钮  文本框            点击按钮  ，文本增加一行文本*/
				  $("input[type='button']").click(function(){
					// alert("jq选择器是否选中") ；
					$("input[type='text']").val("文本框内容修改~");
				  });
				  /* 利用JQ操作DM（页面效果）：1.元素内容操作（3个函数） 
				                                                        
				   
				                                                   2. 属性操作（4个函数）
																	attr（）
																	removeAttr（）
																	<input checked>
																	prop（）
																	removeProp（）
																	3.样式类名操作（4个函数）
																	.demo{属性：属性值..}
																	addClass（）
																	removeClass（）
																	toggleClass（）
																	hasClass（）
																	4.元素样式操作（5个函数）
																	
																	5. 插入和删除修改操作（7个函数）
																	 after（）和before（）
																	 remove（）和empty（）
																	 replaceWidth（）
																	6. 元素遍历操作（6个函数）
																	 7.JQ动画操作（7个函数）
																	 */
		</script>
	</body>
</html>